<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS 代理测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        .proxy-test {
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border-left: 4px solid #4CAF50;
        }
        .proxy-test.error {
            border-left-color: #f44336;
        }
        .proxy-test.testing {
            border-left-color: #ff9800;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
        }
        button:hover {
            background: #45a049;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        .status {
            font-weight: bold;
            margin-left: 10px;
        }
        .success { color: #4CAF50; }
        .error { color: #f44336; }
        .testing { color: #ff9800; }
        pre {
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 CORS 代理服务测试</h1>
        <p>此页面用于测试各个 CORS 代理服务的可用性，确保您的免费主机部署能正常工作。</p>
        
        <button onclick="testAllProxies()">🚀 测试所有代理</button>
        <button onclick="clearResults()">🧹 清除结果</button>
        
        <div id="results"></div>
    </div>

    <script>
        const corsProxies = [
            { name: 'AllOrigins', url: 'https://api.allorigins.win/raw?url=' },
            { name: 'CorsProxy.io', url: 'https://corsproxy.io/?' },
            { name: 'CodeTabs', url: 'https://api.codetabs.com/v1/proxy?quest=' },
            { name: 'HTMLDriven', url: 'https://cors-proxy.htmldriven.com/?url=' },
            { name: 'Crossorigin.me', url: 'https://crossorigin.me/' },
            { name: 'ThingProxy', url: 'https://thingproxy.freeboard.io/fetch/' },
            { name: 'YaCDN', url: 'https://yacdn.org/proxy/' }
        ];

        function buildProxyUrl(proxy, targetUrl) {
            if (proxy.url.includes('allorigins.win') || 
                proxy.url.includes('corsproxy.io') || 
                proxy.url.includes('codetabs.com') || 
                proxy.url.includes('htmldriven.com')) {
                return proxy.url + encodeURIComponent(targetUrl);
            } else {
                return proxy.url + targetUrl;
            }
        }

        async function testProxy(proxy) {
            const testUrl = 'https://httpbin.org/json';
            const proxyUrl = buildProxyUrl(proxy, testUrl);
            
            const resultDiv = document.getElementById(`result-${proxy.name}`);
            resultDiv.className = 'proxy-test testing';
            resultDiv.innerHTML = `
                <h3>${proxy.name}</h3>
                <div class="status testing">🔄 测试中...</div>
                <div>代理URL: ${proxy.url}</div>
            `;

            try {
                const startTime = Date.now();
                const response = await fetch(proxyUrl, {
                    method: 'GET',
                    headers: { 'Accept': 'application/json' }
                });
                const endTime = Date.now();
                const responseTime = endTime - startTime;

                if (response.ok) {
                    const data = await response.json();
                    resultDiv.className = 'proxy-test';
                    resultDiv.innerHTML = `
                        <h3>${proxy.name}</h3>
                        <div class="status success">✅ 成功 (${responseTime}ms)</div>
                        <div>代理URL: ${proxy.url}</div>
                        <div>状态码: ${response.status}</div>
                        <pre>${JSON.stringify(data, null, 2).substring(0, 200)}...</pre>
                    `;
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                resultDiv.className = 'proxy-test error';
                resultDiv.innerHTML = `
                    <h3>${proxy.name}</h3>
                    <div class="status error">❌ 失败</div>
                    <div>代理URL: ${proxy.url}</div>
                    <div>错误: ${error.message}</div>
                `;
            }
        }

        async function testAllProxies() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '';

            // 创建结果容器
            corsProxies.forEach(proxy => {
                const div = document.createElement('div');
                div.id = `result-${proxy.name}`;
                div.className = 'proxy-test';
                div.innerHTML = `
                    <h3>${proxy.name}</h3>
                    <div class="status">⏳ 等待测试...</div>
                `;
                resultsDiv.appendChild(div);
            });

            // 并行测试所有代理
            const promises = corsProxies.map(proxy => testProxy(proxy));
            await Promise.allSettled(promises);

            // 显示总结
            const summary = document.createElement('div');
            summary.className = 'proxy-test';
            summary.innerHTML = `
                <h3>📊 测试总结</h3>
                <div>测试完成时间: ${new Date().toLocaleString()}</div>
                <div>如果大部分代理都能正常工作，说明您的网络环境良好，应用部署后能正常使用。</div>
            `;
            resultsDiv.appendChild(summary);
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
    </script>
</body>
</html>
